import { useState } from 'react'
import { useRouter } from 'next/router'

const mockUsers: User[] = [
  { id: 1, name: '张三', email: 'zhangsan@example.com' },
  { id: 2, name: '李四', email: 'lisi@example.com' }
]

export default function UserPage() {
  const [users, setUsers] = useState(mockUsers)
  const router = useRouter()

  const handleEdit = (id: number) => {
    router.push(`/user/edit/${id}`)
  }

  return (
    <div className="p-4">
      <h1 className="text-xl font-bold mb-4">用户管理</h1>
      <div className="space-y-4">
        {users.map(user => (
          <div key={user.id} className="flex justify-between items-center p-4 bg-white rounded-lg shadow">
            <div>
              <div className="font-medium">{user.name}</div>
              <div className="text-sm text-gray-500">{user.email}</div>
            </div>
            <button 
              onClick={() => handleEdit(user.id)}
              className="px-4 py-2 bg-blue-500 text-white rounded-lg"
            >
              编辑
            </button>
          </div>
        ))}
      </div>
    </div>
  )
}